<!--
 * @Author yuec621@outLook.com
 * @Description: 工具栏日历组件
 * @Date: 2024-11-04 13:34:02
 * @LastEditTime: 2024-11-14 13:58:35
 * @LastEditors: Please set LastEditors
 * @Reference: 
-->
<template>
    <div class="calendarox">
        <div class="tabdiyBox">
            <span v-for="item in state.tabList" :class="state.tabType == item.type?'active':''"
                @click="tabClick(item)">{{ item.name }}</span>
        </div>
        <el-calendar ref="calendar" v-if="state.tabType ==2" v-model="state.date">
            <template #header="{ date }">
                <div>
                    <span>{{date}}</span>
                    <span class="hover" @click="selectDate('prev-month')">
                        <svg-icon icon-class="zuo" /></span>
                    <span class="hover" @click="selectDate('next-month')">
                        <svg-icon icon-class="you" /></span>
                    <span class="todayBox hover" @click="selectDate('today')">今天</span>
                </div>
            </template>
            <template #date-cell="{ data }">
                <span @click="selectDay(data)" :class="data.isSelected?'dayBox active':'dayBox'">
                    {{ data.day.split('-').slice(2).toString() }}
                </span>
                <el-popover placement="right" :width="300" trigger="click"
                    v-if="data.type=='current-month'&&calendarList.length>0">
                    <template #reference>
                        <div style="height: 50%;">
                            <div style="width:100%;" v-for="item in calendarList" :key="item">
                                <div class="dataalarm dataalarmsmall" v-if="item.eventTime==data.day">
                                    <div class="dot" v-for="(itemsub,index) in item.events">
                                        <em
                                            :class="itemsub.eventType==0?'one':itemsub.eventType==1?'two':itemsub.eventType==2?'thr':itemsub.eventType==3?'four':itemsub.eventType==4?'five':itemsub.eventType==5?'six':itemsub.eventType==6?'serve':''"></em>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </template>
                    <div class="timeBox" v-for="item in calendarList">
                        <el-row :gutter="24" v-if="item.eventTime==data.day">
                            <el-col :span="24">
                                <el-row :gutter="24" v-for="(itemsub,index) in item.events">
                                    <el-col :span="10" class="lfTime">
                                        <span
                                            v-html="itemsub.eventType==0?'报警'
                                        :itemsub.eventType==1?'断电':itemsub.eventType==2?'标校':
                                        itemsub.eventType==3?'断线':itemsub.eventType==4?'馈电异常':itemsub.eventType==5?'网络故障':'分站故障'">
                                        </span>
                                        <span><em>{{ itemsub.eventNum }}</em>次</span>
                                    </el-col>
                                    <el-col :span="14" class="lfTime">
                                        <span>
                                            累计时长
                                        </span>
                                        <span>{{ itemsub.eventDuration }}</span>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                    </div>
                </el-popover>
            </template>
        </el-calendar>
        <!-- 本周 -->
        <weekCom v-if="state.tabType ==1" :calendarList="calendarList" :date="state.date" :legendList="legendList">
        </weekCom>
        <div>
            <div class="dataalarm">
                <div class="dot" v-for="(item,index) in ['报警','断电','标校','断线','馈电异常','网络故障','分站故障']">
                    <em
                        :class="index==0?'one':index==1?'two':index==2?'thr':index==3?'four':index==4?'five':index==5?'six':index==6?'serve':''"></em>{{ item }}
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
    import {
        computed,
        reactive,
        watchEffect
    } from 'vue';
    import axios from "@/utils/request"
    import {
        searchchannelNoList
    } from '@/api/config'
    import useUserStore from "@/store/modules/user";
    import dayjs from 'dayjs';
    import weekCom from './weekCom.vue'
    const {
        proxy
    } = getCurrentInstance();
    const calendar = ref(null)
    const userStore = useUserStore();
    const emits = defineEmits([''])
    const props = defineProps({
        calendarList: {
            type: Array,
            default: () => {
                return []
            }
        },
        legendList: {
            type: Array,
            default: () => {
                return []
            }
        },
        date: {
            type: String,
            default: () => {
                return dayjs()
            }
        }
    })
    // 重点
    const state = reactive({
        visible: false,
        date: dayjs().format('YYYY年MM月'),
        tabType: 2,
        tabList: [{
                type: 1,
                name: '周'
            },
            {
                type: 2,
                name: '月'
            }
        ]
    })

    function selectDate(val) {
        if (!calendar.value) return
        calendar.value.selectDate(val)
        if(val=='prev-month'){
            emits('prevNextselectDay', dayjs(calendar.value.selectedDay).subtract(1,'month'))
        }else if(val=='next-month'){
            emits('prevNextselectDay', dayjs(calendar.value.selectedDay).add(1,'month'))
        }
        
    }

    function tabClick(item) {
        state.tabType = item.type
    }

    function selectDay(data) {
        emits('selectDay', data.day)
    }
    watchEffect(() => {
        state.date = dayjs(props.date[0])
    })
</script>
<style lang="scss" scoped>
    .timeBox {
        font-size: 14px;

        .lfTime {
            span {
                margin: 4px 0;

                em {
                    color: rgba(64, 158, 255, 1);
                    font-size: 700;
                    font-style: normal;
                }

                &:nth-child(1) {
                    margin-right: 8px;
                    color: rgba(62, 70, 79, 0.6);
                }

                &:nth-child(2) {
                    color: rgba(62, 70, 79, 1);
                }
            }
        }

    }

    :deep(.el-calendar__body) {
        padding-bottom: 0;
    }

    .calendarox {
        border-radius: 8px;
        background: linear-gradient(180deg, rgba(240, 246, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
        box-shadow: 0px 2px 20px rgba(91, 109, 128, 0.2);
        backdrop-filter: blur(20px);
        max-width: 863px;
        position: relative;

        .tabdiyBox {
            position: absolute;
            top: 8px;
            right: 10px;
        }
    }

    :deep(.el-calendar) {
        background-color: transparent;
    }

    :deep(.el-calendar-table thead) {
        background-color: rgba(68, 136, 255, 0.16);
    }

    .todayBox {
        margin-left: 10px;
        font-size: 16px;
        border-radius: 2px;
        background: rgba(91, 109, 128, 0.08);
        padding: 4px 16px 4px 16px;
    }

    .dayBox {
        margin-top: 8px;
        font-size: 18px;
        font-weight: 500;
        display: inline-block;
        padding: 6px;

        &.active {
            background-color: rgba(68, 136, 255, 1);
            padding: 6px;
            border-radius: 50%;
            color: #fff;
        }
    }

    .dataalarm {
        display: flex;
        margin: 20px 16px 10px;

        &.dataalarmsmall {
            margin: 10px 4px 0;

            .dot {
                margin-right: 0px;

                em {
                    width: 4px;
                    height: 4px;

                    &::before {
                        width: 8px;
                        height: 8px;
                    }
                }
            }
        }

        .dot {
            font-size: 14px;
            border-radius: 50%;
            margin-right: 30px;
            display: flex;
            align-items: center;

            em {
                margin-right: 10px;
                display: block;
                width: 8px;
                height: 8px;
                border-radius: 50%;
                // background-color: rgba(255, 153, 0, 1);
                position: relative;

                &::before {
                    position: absolute;
                    content: '';
                    left: 50%;
                    top: 50%;
                    width: 16px;
                    height: 16px;
                    border-radius: 50%;
                    transform: translate(-50%, -50%);
                    // background-color: rgba(255, 153, 0, 0.16);
                }

                &.one {
                    background-color: rgba(255, 153, 0, 1);

                    &::before {
                        background-color: rgba(255, 153, 0, 0.16);
                    }
                }

                &.two {
                    background-color: rgba(255, 85, 85, 1);

                    &::before {
                        background-color: rgba(255, 85, 85, 0.16);
                    }
                }

                &.thr {
                    background-color: rgba(170, 119, 238, 1);

                    &::before {
                        background-color: rgba(170, 119, 238, 0.16);
                    }
                }

                &.four {
                    background-color: rgba(136, 170, 204, 1);

                    &::before {
                        background-color: rgba(136, 170, 204, 0.16);
                    }
                }

                &.five {
                    background-color: rgba(238, 102, 187, 1);

                    &::before {
                        background-color: rgba(238, 102, 187, 0.16);
                    }
                }

                &.six {
                    background-color: rgba(85, 204, 238, 1);

                    &::before {
                        background-color: rgba(85, 204, 238, 0.16);
                    }
                }

                &.serve {
                    background-color: rgba(102, 136, 255, 1);

                    &::before {
                        background-color: rgba(102, 136, 255, .16);
                    }
                }
            }

        }
    }
</style>